<template>
  <div class="wrapper" ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  name: "Scroller",
  props:{
    handleToScroll:{
      type:Function,
      default:function(){}
    },
    handleToTouchEnd:{
      type:Function,
      default:function(){}
    }
  },
  mounted() {
    setTimeout(() => {
      var scroll = new BScroll(this.$refs.wrapper, {
        tap: true,
        click: true,
        probeType: 1,
        mouseWheel: true,
        disableMouse: false,//启用鼠标拖动
        disableTouch: false//启用手指触摸
      });
      this.scroll = scroll;
      scroll.on('scroll',(pos)=>{
        this.handleToScroll(pos);
      })
      scroll.on('touchEnd',(pos)=>{
        this.handleToTouchEnd(pos);
      })
    },1000)
  },
  methods:{
    toScrollTop(y){
      this.scroll.scrollTo(0,y);
    }
  }
};
</script>

<style scoped lang="scss">
.wrapper {
  height: 100%;
}
</style>